<template>
  <div class="container-box">
    <div class=inmage>
      <router-link to="/me">返回</router-link>
        <img src="../assets/custom.jpg" alt="">
    </div>
    <PullRefresh
      v-model="isLoading"
      class="pull-s"
      :pulling-text="pullText"
      :loosing-text="loosText"
      @refresh="onRefresh">
      <div id="chat_content" class="chat-content" @click="() => {showMore = false}">
        <!-- recordContent 聊天记录数组-->
        <div v-for="(itemc, indexc) in recordContent" :key="indexc">
          <!-- 对方 -->
          <div v-if="itemc.MsgType === '2'" class="word">
            <img :src="itemc.headUrl">
            <div class="info">
              <!-- <p class="time">{{ itemc.nickName }} {{ itemc.timestamp }}</p> -->
              <div v-if="itemc.contentType === '1'" class="info-content p-10">{{ itemc.contactText }}</div>
              <div v-if="itemc.contentType === '2'" class="info-content p-10">
                <VanImage width="100" height="100" :src="itemc.contactImage" @click="imageClick" />
              </div>
              <div v-if="itemc.contentType === '3'" class="info-content">
                <div class="w-200">
                  <div class="d-guess">猜你想问</div>
                  <Cell v-for="(itemq, indexq) in itemc.contactList" :key="indexq" border :value="itemq.content" :is-link="true" />
                  <Cell border :center="true">
                    <div class="d-more">更多问题</div>
                  </Cell>
                </div>
              </div>
            </div>
          </div>
          <!-- 我的 -->
          <div v-if="itemc.MsgType === '1'" class="word-my">
            <div class="info">
              <!-- <p class="time">{{ itemc.nickName }} {{ itemc.timestamp }}</p> -->
              <div v-if="itemc.contentType === '1'" class="info-content p-10">{{ itemc.contactText }}</div>
              <div v-if="itemc.contentType === '2'" class="info-content p-10">
                <VanImage width="100" height="100" fit="contain" :src="itemc.contactImage" @click="imageClick" />
              </div>
              <div v-if="itemc.contentType === '3'" class="info-content">{{ itemc.contactText }}</div>
            </div>
            <img :src="itemc.headUrl">
          </div>
          <!--时间戳-->
          <div v-if="itemc.MsgType === '3'" class="d-stamp">
            <span v-if="itemc.lastPartTimeStamp !== ''" class="s-stamp">
              {{ itemc.lastPartTimeStamp }}
            </span>
            <span v-else class="s-close">
              您很长时间没说话，会话已结束
            </span>
          </div>
        </div>
      </div>
    </PullRefresh>
    <Search
      v-model="searchWords"
      show-action
      left-icon=""
      shape="square"
      background="#E2E3E5"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <div slot="action" class="d-add" @click="() => {showMore = !showMore}">
        <Icon name="add-o" size="20" />
      </div>
    </Search>
    <div v-show="showMore" class="d-showMore">
      <div v-for="(conL, indexL) in iconList" :key="indexL" class="d-more-container">
        <Uploader>
          <div class="upload-div">
            <div class="d-more-box">
              <Icon :name="conL.icon" size="20" />
            </div>
            <span class="s-more-name">{{ conL.name }}</span>
          </div>
        </Uploader>
      </div>
      <div class="d-grow" />
    </div>
  </div>
</template>

<script>
import { PullRefresh, Search, NavBar, Image as VanImage, ImagePreview, Cell, Icon, Uploader } from 'vant'
export default {
  components: {
    PullRefresh,
    Search,
    NavBar,
    VanImage,
    Cell,
    Icon,
    Uploader
  },
  data() {
    return {
      isLoading: false,
      pullText: '下拉查看历史记录',
      loosText: '加载历史会话',
      leftArrow: false,
      showMore: false,
      searchWords: '',
      iconList: [
        {
          icon: 'photo',
          name: '发送图片'
        },
        {
          icon: 'printer',
          name: '发送文件'
        },
        {
          icon: 'more',
          name: '留言'
        }
      ],
      recordContent: [
        {
          MsgType: '1', // MsgType: 1 => customer 2 => service 3 => tips
          //headUrl: 'http://192.168.100.202:80/group1/M00/00/04/wKhkyl-zPQ6AF3oCAAHc04qwej4332.jpg', // 头像url地址
          nickName: '我', // 昵称
          timestamp: '2021-8-19 12:12:12', // 时间戳
          contentType: '1', // contentType: 1 => Text 2 => image 3 => List
          contactText: '官宣：星火集团全国统一服务热线：4008320009，如有问题欢迎您来电咨询。温馨提示：为了确保您购买到星火的正版图书及课程，以下是各学段商品正规购买渠道推荐^_^',
          contactImage: '', // 图片地址
          contactList: [], // 提供选项列表
          lastPartTimeStamp: '' // 上一次会话时间戳
        },
        {
          MsgType: '2',
          //headUrl: 'http://192.168.100.202:80/group1/M00/00/04/wKhkyl-zPQ6AF3oCAAHc04qwej4332.jpg',
          nickName: '刘二狗',
          timestamp: '2021-8-19 12:13:14',
          contentType: '1',
          contactText: '请问有什么可以帮你吗',
          contactImage: '',
          contactList: [],
          lastPartTimeStamp: ''
        },
        { // 结束会话
          MsgType: '3',
          headUrl: '',
          nickName: '',
          timestamp: '',
          contentType: '',
          contactText: '',
          contactImage: '',
          contactList: [],
          lastPartTimeStamp: ''
        }
      ],
      historyContent: [
        {
          MsgType: '1',
          //headUrl: 'http://192.168.100.202:80/group1/M00/00/04/wKhkyl-zPQ6AF3oCAAHc04qwej4332.jpg',
          nickName: '我',
          timestamp: '2020-11-18 08:12:12',
          contentType: '2',
          contactText: '我',
          contactImage: 'https://img.yzcdn.cn/vant/cat.jpeg',
          contactList: [],
          lastPartTimeStamp: ''
        },
        {
          MsgType: '2',
          //headUrl: 'http://192.168.100.202:80/group1/M00/00/04/wKhkyl-zPQ6AF3oCAAHc04qwej4332.jpg',
          nickName: '刘二狗',
          timestamp: '2020-11-18 09:13:14',
          contentType: '3',
          contactText: '烟花三月下扬州',
          contactImage: '',
          contactList: [
            {
              content: '你想问这个吗',
              id: '1'
            },
            {
              content: '你想问那个吗',
              id: '2'
            },
            {
              content: '你到底想问什么呀',
              id: '3'
            }
          ],
          lastPartTimeStamp: '21/8/18 10:19:58'
        },
        { // 上一次会话时间戳 看lastPartTimeStamp是否为空
          MsgType: '3',
          headUrl: '',
          nickName: '',
          timestamp: '',
          contentType: '',
          contactText: '',
          contactImage: '',
          contactList: [],
          lastPartTimeStamp: '21/8/18 10:19:58'
        }
      ],
      sessionInput: {}
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        let len = this.historyContent.length
        for (let i = len - 1; i >= 0; i--) {
          this.recordContent.unshift(this.historyContent[i])
        }
      }, 1000)
    },
    helloworld() {
      // console.log('11')
    },
    onSearch(value) {
      if (value !== '') {
        this.sessionInput = {
          MsgType: '1',
          //headUrl: 'http://192.168.100.202:80/group1/M00/00/04/wKhkyl-zPQ6AF3oCAAHc04qwej4332.jpg',
          nickName: '我',
          timestamp: this.getCurrentTimeStamp(),
          contentType: '1',
          contactText: value,
          contactList: [],
          lastPartTimeStamp: ''
        }
        this.searchWords = ''
        this.recordContent.push(this.sessionInput)
        this.sessionInput = {}
        this.scrollToBottom()
      }
    },
    getCurrentTimeStamp() {
      let myDate = new Date()
      let month = myDate.getMonth() + 1
      let day = myDate.getDate()
      let hour = myDate.getHours()
      let minute = myDate.getMinutes()
      let second = myDate.getSeconds()
      month = month.toString().length === 1 ? '0' + month : month
      day = day.toString().length === 1 ? '0' + day : day
      hour = hour.toString().length === 1 ? '0' + hour : hour
      minute = minute.toString().length === 1 ? '0' + minute : minute
      second = second.toString().length === 1 ? '0' + second : second
      let result =
        myDate.getFullYear() + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      return result
    },
    scrollToBottom() {
      this.$nextTick(() => {
        let container = this.$el.querySelector('#chat_content')
        container.scrollTop = container.scrollHeight
      })
    },
    imageClick(e) {
      // console.log(e)
      let imgArr = []
      imgArr.push(e.target.currentSrc)
      ImagePreview(imgArr)
    }
  }
}
</script>
<style lang="scss" scoped>
.container-box {
  width: 100%;
  height: 100%;
  display: flex;
  // justify-content:flex-end;
  flex-direction: column;
}

.inmage{
  position: fixed;
  display: flex;
  justify-content:space-between;
  height: 3.75rem;
  width: 100%;
  background: rgb(48, 122, 232);
  z-index: 100;
  img{
    padding: 0rem .625rem;
    height: 2.5rem;
    padding: .625rem;
    border-radius: 50%;
  }
  a{
    margin-left: 1.25rem;
    color: #fff;
    line-height: 4.0625rem;
  }
}

.chat-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 1.25rem;
  .word {
    display: flex;
    margin-bottom: 1.25rem;
    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
    .info {
      margin-left: .625rem;
      .time {
        font-size: .75rem;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 1.25rem;
        line-height: 1.25rem;
        margin-top: -0.3125rem;
      }
      .info-content {
        // padding: 10px;
        font-size: .875rem;
        // background: rgb(66, 171, 219);
        border: .0625rem solid lightgray;
        border-radius: .3125rem;
        position: relative;
        margin-top: .5rem;
        color: #333333;
      }
    }
  }

  .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
    .info {
      // margin-left: 10px;
      text-align: right;
      .time {
        font-size: .75rem;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 1.25rem;
        line-height: 1.25rem;
        margin-top: -0.3125rem;
        margin-right: .625rem;
      }
      .info-content {
        max-width: 90%;
        // padding: 10px;
        font-size: .875rem;
        float: right;
        margin-right: .625rem;
        position: relative;
        margin-top: .5rem;
        background: #E6F0FB;
        text-align: left;
        color: #5D6878;
        border: .0625rem solid lightgray;
        border-radius: .3125rem;
      }

    }
  }
}
.van-cell-group__title {
  padding: .5rem .5rem .25rem;
  color: black;
}
.van-cell {
  padding: .3125rem .5rem;
}
.upload-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pull-s {
  flex-grow: 1;margin-top: 2.875rem;
}
.p-10 {
  padding:.625rem;
}
.w-200 {
  width: 11.25rem;
}
.d-guess {
  text-align: left;
  padding: .5rem .5rem;
  background-color: #F6F6F9;
}
.d-more {
  text-align: center;
  color:#4DA9FF;
}
.d-stamp {
  text-align: center;
  margin-bottom: .625rem;
}
.s-stamp {
  background-color:#E2E3E5;
  padding: .25rem 1.25rem;
  font-size: .625rem;
  border-radius: .25rem;
  color: #fff;
}
.s-close {
  background-color:#E2E3E5;
  padding: .25rem 1.25rem;
  font-size: .625rem;
  border-radius: .25rem;
  color: #fff;
}
.van-search{
  position: fixed;
  bottom: 0rem;
  width: 100%;
}
.d-showMore{
  position: fixed;
  bottom: 0rem;
}
.d-add {
  display: flex;
  flex-direction: column;
}
.d-showMore {
  height: 3.75rem;
  background-color:#E2E3E5;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left:.625rem;
}
.d-more-container {
  width: 3.75rem;
  height: 100%;
  margin-right: .625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.d-more-box {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color:#F7F8FA;
  margin-bottom:.3125rem;
}
.s-more-name {
  font-size: .5625rem;
  margin-bottom: .3125rem;
  color:#333333;
}
.d-grow {
  flex-grow: 1;
}
</style>
